<template>
  <view class="carousel">
    <swiper class="swiper" :indicator-dots="false" @change="onChange">
      <swiper-item v-for="item in props.list" :key="item.id" @tap="onTap" data-index="{{index}}">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="widthFix" :src="item.imgUrl" class="image"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { TBannerItem } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const props = defineProps<{
  list: TBannerItem[]
}>()

const activeIndex = ref(0)

onLoad(() => {})
const onChange: UniHelper.SwiperOnChange = (event) => {
  activeIndex.value = event.detail.current
}

const onTap = (event: any) => {
  // 图片大图预览
  const index = event.currentTarget.dataset.index
  const urlArr = props.list.map((i) => i.imgUrl)
  uni.previewImage({
    urls: [urlArr[index]],
    indicator: 'number',
  })
}
</script>

<style lang="scss" scoped>
.carousel {
  position: relative;
  height: 100%;
  width: 100%;
  .image {
    width: 100%;
    height: 100%;
  }

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    display: flex;
    justify-content: center;
    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
    }
    .active {
      background-color: #fff;
    }
  }
}
</style>
